<template>
  <div>
    <el-dialog v-model="visible" :show-close="false" width="900">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            {{ formData.id ? '编辑' : '创建' }}产品
          </h4>
        </div>
      </template>

      <div>
        <el-form :model="formData" label-width="120px" ref="elFormRef">
          <el-form-item label="商户Id" prop="shopId" v-if="isShowShopId">
            <el-input v-model="formData.shopId" size="large" placeholder="请输入商户Id" />
          </el-form-item>

          <el-form-item label="产品名称" prop="goods_name">
            <el-input v-model="formData.goods_name" size="large" placeholder="请输入产品名称" />
          </el-form-item>

          <el-form-item label="产品图片" prop="goods_img">
            <Upload v-model="formData.goods_img" maxCount="99" />
          </el-form-item>

          <el-form-item label="默认价格" prop="goods_money">
            <el-input-number v-model="formData.goods_money" size="large" placeholder="请输入默认价格" />
          </el-form-item>

          <el-form-item label="产品描述" prop="describe">
            <el-input v-model="formData.describe" type="textarea" size="large" placeholder="请输入产品描述" />
          </el-form-item>

          <el-form-item label="底部信息介绍" prop="bottom_text">
            <el-input v-model="formData.bottom_text" type="textarea" size="large" placeholder="请输入产品描述" />
          </el-form-item>

          <el-form-item label="是否热门" prop="is_hot">
            <el-radio-group v-model="formData.is_hot" class="ml-4">
              <el-radio :label="0" :value="0" size="large">否</el-radio>
              <el-radio :label="1" :value="1" size="large">是</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="商品星级" prop="goods_money">
            <el-input-number v-model="formData.star" size="large" placeholder="请输入默认价格" />
          </el-form-item>

          <el-form-item label="配料" prop="ingredient">
            <el-input v-model="formData.ingredient" type="textarea" size="large" placeholder="请输入产品描述" />
          </el-form-item>

          <el-form-item label="销量" prop="buy_num">
            <el-input-number v-model="formData.buy_num" size="large" />
          </el-form-item>


          <el-form-item label="产品分类" prop="goods_type_id">
            <!-- <Select v-model="formData.goods_type_id" mode="api" labelKey="title" valueKey="id"
              apiUrl="api/admin/shopLabelAddAndEdit" /> -->
            <MerchantTypeSelect v-model="formData.goods_type_id" :shopId="formData.shopId"/>
          </el-form-item>

          <el-form-item label="产品状态" prop="status">
            <Select v-model="formData.status" :data="productStatus" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>

          <el-button type="primary" @click="handleSubmit">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch, onMounted, nextTick, computed } from 'vue'
import { UserAddAndEdit, GoodsEdit, GoodsAdd } from '@/api/index'
import { ElMessage } from 'element-plus'
import Select from '@/components/admin/Select.vue'
import Upload from '@/components/Upload.vue'
import { Goods } from '@element-plus/icons-vue'
import MerchantTypeSelect from '@/components/admin/merchants/MerchantTypeSelect.vue'


const props = defineProps({
  productStatus: {
    type: Object,
    default: () => ({})
  },
})

const visible = ref(false)

const elFormRef = ref(null)

const isShowShopId = ref(false)

watch(() => visible.value, (newVal) => {
  if (newVal == false) {
    elFormRef.value.resetFields()
  }
})

// 表单数据
const formData = ref({
  id: '',
  goods_name: '',
  goods_img: '',
  head_img: [''],
  goods_money: '',
  bottom_text: '',
  is_hot: '',
  star: '',
  ingredient: '',
  describe: '',
  buy_num: '',
  goods_type_id: '',
  shopId: null
})

const open = (config, showShopType = false) => {
  Object.assign(formData.value, config.data)

  formData.value.shopId = config.data.shop_id

  isShowShopId.value = showShopType

  visible.value = true

  nextTick(() => {
    formData.value.goods_img = config.data.goods_img
  })
}

const close = () => {
  visible.value = false
}

const handleSubmit = async () => {
  let tipTypeStr = formData.value.id ? '编辑' : '创建'

  try {
    formData.value.method = formData.value.id ? 'edit' : 'add'

    if (formData.value.id) {
      delete formData.value.shopId
    }

    formData.value.head_img = formData.value.goods_img && formData.value.goods_img.split(',')

    let res

    if (formData.value.id) {
      res = await GoodsEdit(formData.value)
    } else {
      res = await GoodsAdd(formData.value)
    }

    elFormRef.value.resetFields()

    console.log(456456465, formData.value)

    ElMessage({
      message: `商品${tipTypeStr}成功!`,
      type: 'success'
    })

    emit('reload')

    close()
  } catch (err) {
    console.log('handleSubmit', err)

    ElMessage({
      message: `商品${tipTypeStr}失败!`,
      type: 'error'
    })
  }
}

// 暴露方法给父组件
defineExpose({
  open
});

const emit = defineEmits(['reload'])

onMounted(() => {
  // open()
})
</script>

<style lang='scss' scoped></style>
